import * as React from 'react';
import {useState,Component} from 'react';
import { Icon, IStyleSet,Checkbox,Label,Link,ILinkStyles,ILabelStyles, mergeStyleSets } from '@fluentui/react';
import { DefaultButton, PrimaryButton } from '@fluentui/react/lib/Button';
import { Dialog, DialogFooter } from '@fluentui/react/lib/Dialog';
import { mergeStyles } from '@fluentui/react/lib/Styling';
import { FontIcon } from '@fluentui/react/lib/Icon';
import http from './RequestUtl.ts';
import TriggerTimeline from './TriggerTimeline.tsx';
import './TriggerDetl.css';

const linkStyles_nomal:Partial<IStyleSet<ILinkStyles>>={
  root: {
    //  marginTop: 10,
     fontSize:14,
     fontWeight:600,
     color:'#0078d4', 
     backgroundColor:'#e3e3e3',
     padding:'0px 15px 0px 15px',
  }, 
}
const linkStyles_succed:Partial<IStyleSet<ILinkStyles>>={
  root: {
    //  marginTop: 10,
     fontSize:14,
     fontWeight:600,
     color:'#ffffff', 
     borderRadius:2,
     backgroundColor:'#0467b4',
     padding:'0px 15px 0px 15px',
  }, 
}
const linkStyles_alrm:Partial<IStyleSet<ILinkStyles>>={
  root: {
    //  marginTop: 10,
     fontSize:14,
     fontWeight:600,
     color:'#0795a8', 
     backgroundColor:'#c9fceb',
     padding:'0px 15px 0px 15px',
  },
}

const iconClass = mergeStyles({
  color:'#2165d7',
  fontSize: 14,
  height: 20,
  lineHeight:20,
  borderRadius:2,
  cursor:'pointer',
  width: 30,
  margin: '0 5px',
  background:'#bfe2ef',
  textAlign:'center'
});
const modelProps = {
  isBlocking: true,
  topOffsetFixed: true,
  innerWidth:700,
};
 
class TriggerDetl extends Component { 
  constructor(props){
    super(props); 
    this.state={
        detailData:props.detailData,
        hideDialog:true,
        historyData:[],
    }
  }


  render(){
    return (
      <>
      <div className=''>
        <div className='head_bar'></div>
        <div className='trigeer_dtl'>
            <table>
              <tbody>
                <tr><td>TriggerId</td><td>{this.state.detailData.triggerId}</td></tr>
                <tr><td>JobId</td><td>{this.state.detailData.jobId}</td></tr>
                <tr><td>TriggerType</td><td>{this.state.detailData.triggerType}</td></tr>
                <tr><td>AssemblyName</td><td>{this.state.detailData.assemblyName}</td></tr>
                <tr><td>Args</td><td>{this.state.detailData.args}</td></tr>
                <tr><td>Description</td><td>{this.state.detailData.description}</td></tr>
                <tr><td>Status</td><td>{this.trigeerStatusFormat(this.state.detailData.status)}</td></tr>
                <tr><td>StartTime</td><td>{this.state.detailData.startTime}</td></tr> 
                <tr><td>EndTime</td><td>{this.state.detailData.endTime}</td></tr>
                <tr><td>LastRunTime</td>
                  <td>
                    {this.state.detailData.lastRunTime}
                  <FontIcon aria-label="Compass" iconName="DateTime" className={iconClass} onClick={this.showHistory.bind(this)}/>
                  </td>
                </tr>
                <tr><td>NextRunTime</td><td>{this.state.detailData.nextRunTime}</td></tr>
                <tr><td>NumberOfRuns</td><td>{this.state.detailData.numberOfRuns}</td></tr>
                <tr><td>MaxNumberOfRuns</td><td>{this.state.detailData.maxNumberOfRuns}</td></tr>
                <tr><td>NumberOfErrors</td><td>{this.state.detailData.numberOfErrors}</td></tr>
                <tr><td>MaxNumberOfErrors</td><td>{this.state.detailData.maxNumberOfErrors}</td></tr>
                <tr><td>NumRetries</td><td>{this.state.detailData.numRetries}</td></tr>
                <tr><td>RetryTimeout</td><td>{this.state.detailData.retryTimeout}</td></tr>
                <tr><td>StartNow</td><td>{this.state.detailData.startNow?'是':'否'}</td></tr>
                <tr><td>RunOnStart</td><td>{this.state.detailData.runOnStart?'是':'否'}</td></tr>
                <tr><td>ResetOnlyOnce</td><td>{this.state.detailData.resetOnlyOnce?'是':'否'}</td></tr>
                <tr><td>UpdatedTime</td><td>{this.state.detailData.updatedTime}</td></tr>
              </tbody>
            </table>
        </div>
      </div>
      <Dialog title={this.state.detailData.triggerId} hidden={this.state.hideDialog} onDismiss={()=>this.setState({hideDialog:true})} modalProps={modelProps} maxWidth={700}>
        <div className='historypanel'>
        {
          this.state.historyData.map((v, i) => {
            return <TriggerTimeline  key={"triggertimeline"+i} timeNode={v} thisIndex={i} maxIndex={(this.state.historyData.length-1)}></TriggerTimeline>
          }) 
        }
        </div>
        <DialogFooter>
          <PrimaryButton onClick={()=>this.setState({hideDialog:true})} text="确定" />
          <DefaultButton onClick={()=>this.setState({hideDialog:true})} text="取消" />
        </DialogFooter>
      </Dialog>
      </>
    );
  }
  componentDidMount(){
    const Me=this;
  }
  trigeerStatusFormat(_statusCode){
    if(_statusCode===0) return <Link  styles={linkStyles_alrm}>积压</Link>
    if(_statusCode===1) return <Link  styles={linkStyles_succed}>就绪</Link>
    if(_statusCode===2) return <Link  styles={linkStyles_succed}>运行</Link>
    if(_statusCode===3) return <Link  styles={linkStyles_nomal}>暂停</Link>
    if(_statusCode===4) return <Link  styles={linkStyles_alrm}>阻塞</Link>
    if(_statusCode===5) return <Link  styles={linkStyles_succed}>就绪*</Link>
    if(_statusCode===6) return <Link  styles={linkStyles_nomal}>归档</Link>
    if(_statusCode===7) return <Link  styles={linkStyles_alrm}>崩溃</Link>
    if(_statusCode===8) return <Link  styles={linkStyles_alrm}>超限</Link>
    if(_statusCode===9) return <Link  styles={linkStyles_nomal}>无触发时间</Link>
    if(_statusCode===10) return <Link  styles={linkStyles_alrm}>初始未启动</Link>
    if(_statusCode===11) return <Link  styles={linkStyles_alrm}>未知触发器</Link>
    if(_statusCode===12) return <Link  styles={linkStyles_alrm}>未知处理程序</Link>
  }

  showHistory(){
    var Me=this;
    Me.setState({hideDialog:false});

    getHistoryData(Me.state.detailData,function(_result){
      if(_result.data.code===200){
        let _historyData=_result.data.data;
        if(_historyData!=null){
          _historyData.forEach(element => {
            element.args=Me.state.detailData.args;
          });
        }
        Me.setState({historyData:_historyData});
      }else{
        console.log("获取历史作业记录失败："+_result.data.msg); 
        Me.setState({historyData:[]});
      }
    })
  }
};

function getHistoryData(_trigger,_call){
  http.get("schedule/api/operate-trigger?jobid="+_trigger.jobId+"&triggerid="+_trigger.triggerId+"&action=timelines",{}).then(function(result){
    _call(result);
  });
}
export default TriggerDetl